<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="/taglibs.jsp"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> 
<%@	page import="com.yaodian100.core.common.utils.ServerValue"%>
<c-rt:set var="frontHostName" value='<%=ServerValue.getFrontHostname()%>'/>
<c-rt:set var="midContextPath" value='<%=ServerValue.getMidContextPath()%>'/>
<link rel="stylesheet" href="/css/jquery.tooltip.css" />
<script src="/js/jquery.tooltip.min.js" type="text/javascript"></script>
<script	src="/js/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" charset="UTF-8" src="/js/yaodian100.common.js"></script>	
<%@page import="java.util.Date"%>
<%
	response.setHeader("Pragma","No-Cache");  
	response.setHeader("Cache-Control","No-Cache");  
	response.setDateHeader("Expires",0);  
	long dateTime = new Date().getTime();
%>	
<script language="javascript">
	$().ready(function(){
		$("tr[id*='tdDesc_']").tooltip(); 
		if ( "${selImageType}" =="RMAIN" || "${selImageType}" =="MAIN" ){
			$(":input[type='file'][name='picImgs']").each(function(index){
				$(this).change(function(){
					if ( "" != $(this).val() ){
							checkImg(this,$("#size" + index).val(),$("#width" + index).val(),$("#height" + index).val(),$("#imgCorrect" + index),"");
						}
					});
			});
		}			
		$(":input[type='button'][name='clearBtn']").each(function(index){
			$(this).click(function(){
				var _fileobject = document.batchImgForm.picImgs[index];
				var form=document.createElement('form');
		    document.body.appendChild(form);
		    //记住file在旧表单中的的位置
		    var pos=_fileobject.nextSibling;
		    form.appendChild(_fileobject);
		    form.reset();
		    pos.parentNode.insertBefore(_fileobject,pos);
		    document.body.removeChild(form);
				
				$("#imgCorrect" + index).val("");
				$("#picImgs_" +(index + 1)).val("");
			});
		});		
		$("input[name='mainSubmit']").each(function(index){
			$(this).click(function(){
				if ( $(this).attr("id") == "mainSubmitR" ){
					if ( $("#imageR").val() == "" ){
						alert("尚未选择上传档案，请重新选择！");
						return false;
					}else return true;
				}else{
					if ( $("#imageM").val() == "" ){
						alert("尚未选择上传档案，请重新选择！");
						return false;
					}else return true;
				}
			});
		});
		$("#multiSubmit").click(function(){
			if("" != $("#picDesc_o").val() && wordCount($("#picDesc_o").val())>46){
				alert("长度最多46个半角/23个全角，请重新输入！");
				$("#picDesc_o").focus();
				return false;
				
			}else return true;
			
			if ( "" == $("#MultiFile8_F1").val()){
				alert("尚未选择上传档案，请重新选择！");
				return false;
			}
			if ( $(":input[name='productmgTypeParam']:checked").val() == "PRDT" ){
				var group_count = (20 - "${imgSize}" )/2;
				if ( parseInt($("input[name='imageFiles']").length-1,10) > parseInt(group_count,10) ){
					alert("商品图只能上传十笔,目前已上传:" + parseInt(10 - group_count,10)+"笔");
					return false;
				}
			}			
			return true;
		});
		$("#batchbtn").click(function(){
			$(":input[id*='picImgs_']").each(function(){
				if ( $(this).val() != "" ){
					var id = this.id.split("_")[1];
					$("#picImgNos_" + id).html("<input type='hidden' name='picImgDetails' value='" + $("#imgId_" + id).val() + "θ" + 
							$("#picImgDescs_" + id).val() + "θ" + $("#picImgShowSeqs_" + id).val() + "'/>");
				}
			});
			err = 0;
			$(":input[id*='picImgDescs_']").each(function(){
				if("" != $(this).val() && wordCount($(this).val())>46){
					alert("长度最多46个半角/23个全角，请重新输入！");
					$(this).focus();
					err++;
					return false;
				}
			});
			var msg = "";
			if ( "${selImageType}" =="RMAIN" || "${selImageType}" =="MAIN" ){
				$(":input[type='file'][name='picImgs']").each(function(index){
					if ( $("#imgCorrect" + index).val() != ""  ){
						msg = msg + trim($("#td" + index ).text()) + "," + "\n";
						err++;
					} 
				});
				if ( msg != "" ){
					alert(msg + "的图片规格不符合规范，请检查图片尺寸、大小。");
					return false;
				}
			}			
			if(err==0)
				$("#picList").submit();
			
		});
		$("#selImageType").change(function(){
			$("#editProposeForm").submit();
		});			
	});
</script>
<h1>N选M商品管理-图檔上传<br/>
<div class="f-link">
	<a href="<%=ServerValue.getMidContextPath()%>/pickProduct/search.do">回列表页</a></div>
</h1>
<br />
<c-rt:if test="${not empty product.productId or not empty shelf.shelfId}">
	<jsp:include page="commonMenu.jsp"/>
</c-rt:if>
<s:actionerror />
<s:fielderror />
<table class="tb-data" width="100%">
	<tr>
		<th>商品编号</th>
		<td>${product.productId}</td>
		<th>商品名称</th>
		<td>${product.productName}</td>
	</tr>
	<tr>
		<th>方形主檔图片(500x500)</th>
		<td colspan="3">
			<s:form action="uploadProdImg.do" method="post" enctype="multipart/form-data">
				<input class="multi MultiFile-applied" type="file" accept="gif|jpg" maxlength="1" id="imageM" name="imageMFiles" size="80%" />
				<br/>
				<input type="hidden" name="productIdParam" value="${product.productId}" />
				<input type="hidden" name="shelfIdParam" value="${shelf.shelfId}" />
				<input type="hidden" name="productmgTypeParam" value="MAIN" />
				 <!-- 图片描述： --><input type="hidden" maxlength="46" size="46"  name="picDesc" id ="picDesc_m"/><input type="submit" name="mainSubmit" id="mainSubmitS" value="上传方形主檔圖片" />
			</s:form>
		</td>
	</tr>
	<tr>
		<th>长形主檔图片(400x530)</th>
		<td colspan="3">
			<s:form action="uploadProdImg.do" method="post" enctype="multipart/form-data">
				<input class="multi MultiFile-applied" type="file" accept="gif|jpg" maxlength="1" id="imageR" name="imageMFiles" size="80%" />
				<br/>
				<input type="hidden" name="productIdParam" value="${product.productId}" />
				<input type="hidden" name="shelfIdParam" value="${shelf.shelfId}" />
				<input type="hidden" name="productmgTypeParam" value="RMAIN" />
				<!-- 图片描述： --><input type="hidden" maxlength="46" size="46"  name="picDesc" id ="picDesc_m"/><input type="submit" name="mainSubmit" id="mainSubmitR" value="上传长形主檔圖片" />
			</s:form>
		</td>
	</tr>	
	<tr>
		<th>描述图片/其他图片</th>
		<td colspan="3">
			<s:form action="uploadProdImg.do" method="post" enctype="multipart/form-data">
				<input id="MultiFile8_F1" class="multi accept-gif|jpg" type="file" name="imageFiles" size="80%" accept="gif|jpg" />
				<br/>
				<input name="productmgTypeParam" type="radio" value="DESC" checked/>商品描述图片<br/>
				<c-rt:choose>
		         	<c-rt:when test="${imgSize >= 20}">
		         		<input name="productmgTypeParam" type="radio" value="PRDT" disabled="disabled"/>其他图片<br/>
		         	</c-rt:when>
		         	<c-rt:otherwise>
		         		<input name="productmgTypeParam" type="radio" value="PRDT" />其他图片<br/>
		         	</c-rt:otherwise>
		        </c-rt:choose>
		       	 图片说明：<input type="text" maxlength="46" size="46" name="picDesc" id ="picDesc_o"/><br/>
		       	 <span class="txt-gy">非必填，长度最多23个全角。</span><br/>
				<input type="hidden" name="productIdParam" value="${product.productId}" />
				<input type="hidden" name="shelfIdParam" value="${shelf.shelfId}" />
				<input type="submit" id="multiSubmit" value="上传图片" />
			</s:form>
		</td>
	</tr>
</table>
<font color="red">※檔案一次上传不可超过5mb</font>
<br/>
<s:if test="hasActionMessages()">
	<p>
	<span style="color:red"><s:actionmessage/></span>
	</p>
</s:if>
<br/>
<s:form action="viewUploadProdImg.do" method="post" id="editProposeForm">
	<b>请选择图檔类型：</b><s:select id="selImageType" name="selImageType" list="imageTypeMap"></s:select>
	<input type="hidden" name="pdFlag" value="PPT"/>
	<input type="hidden" name="productId" value="${productId}"/>
</s:form>
<s:form action="deletePic.do" method="post" id="picList" enctype ="multipart/form-data"  name="batchImgForm">
	<input type="hidden" name="productIdParam" value="${product.productId}" />
	<input type="hidden" name="shelfIdParam" value="${shelf.shelfId}" />
	<input type="hidden" name="selImageType" value="${selImageType}"/>
	<table class="tb-1" width="100%">
		<tr>
			<td colspan="6" style="text-align: right">             
		    <strong>${imageTypeMap[selImageType]}资料共 <s:property value="images.size"/>笔 </strong>
		  </td>
		</tr> 
		<tr>
			<th>图片</th>
			<!-- <th>#</th> -->
			<th>类型</th>
			<th>路径</th>
			<th>描述</th>
			<th>顺序</th>
			<th>删除</th>
		</tr>
		<s:if test="images.size > 0">
			<c:forEach items="${images}" var="image" varStatus="rows_index">
				<tr class="${rows_index.count % 2 == 0 ? 'bg-yl' : ''}" id="tdDesc_${rows_index.count}" title="建立者:${image.createUser} 建立日期:${image.createDate}<br/>修改者:${image.modifyUser} 修改日期:${image.modifyDate}">
					<td>
						<c:choose>
						<c:when test="${image.type == 'IMGB'}">
							<a href="<%=ServerValue.getImgDomain()%>${image.imgFilePath}" target="_blank"><img src="${image.imgFilePath}?nocache=<%=dateTime%>" onError="this.src='/PImg/blank_75.gif'" width="75" height="75"/></a>
						</c:when>
						<c:otherwise>
							<img src="${image.imgFilePath}?nocache=<%=dateTime%>" onError="this.src='/PImg/blank_75.gif'" width="75" height="75"/>
						</c:otherwise>
						</c:choose>
					</td>
					<!-- 
					<td>
					<a onclick="doAR('toEditImgDetail.do?imgId=${image.id}&productIdParam=${product.productId}&shelfIdParam=${shelf.shelfId}', 'dialog');openDialog('修改资料');" href="javascript:;">${image.id}</a>
					</td>
					-->
					<c:if test="${image.type=='MAIN'}">
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_m500.') != -1}">
								<c-rt:set var="imgTypeName" value="方形主档图(500x500<120k)"/>
								<c-rt:set var="width" value="500"/>
								<c-rt:set var="height" value="500"/>
								<c-rt:set var="size" value="120"/>
							</c-rt:if>
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_m250.') != -1}">
								<c-rt:set var="imgTypeName" value="方形主档图(250x250<50k)"/>
								<c-rt:set var="width" value="250"/>
								<c-rt:set var="height" value="250"/>
								<c-rt:set var="size" value="50"/>
							</c-rt:if>
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_m135.') != -1}">
								<c-rt:set var="imgTypeName" value="方形主档图(135x135<20k)"/>
								<c-rt:set var="width" value="135"/>
								<c-rt:set var="height" value="135"/>
								<c-rt:set var="size" value="20"/>
							</c-rt:if>
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_m100.') != -1}">
								<c-rt:set var="imgTypeName" value="方形主档图(100x100<10k)"/>
								<c-rt:set var="width" value="100"/>
								<c-rt:set var="height" value="100"/>
								<c-rt:set var="size" value="10"/>
							</c-rt:if>
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_m75.') != -1}">
								<c-rt:set var="imgTypeName" value="方形主档图(75x75<7k)"/>
								<c-rt:set var="width" value="75"/>
								<c-rt:set var="height" value="75"/>
								<c-rt:set var="size" value="7"/>
							</c-rt:if>							
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_m50.') != -1}">
								<c-rt:set var="imgTypeName" value="方形主档图(50x50<5k)"/>
								<c-rt:set var="width" value="50"/>
								<c-rt:set var="height" value="50"/>
								<c-rt:set var="size" value="5"/>
							</c-rt:if>								
						</c:if>
						<c:if test="${image.type=='RMAIN'}">
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_rm530.') != -1}">
								<c-rt:set var="imgTypeName" value="长形主档图(400x530<100k)"/>
								<c-rt:set var="width" value="400"/>
								<c-rt:set var="height" value="530"/>
								<c-rt:set var="size" value="100"/>
							</c-rt:if>
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_rm330.') != -1}">
								<c-rt:set var="imgTypeName" value="长形主档图(250x330<50k)"/>
								<c-rt:set var="width" value="250"/>
								<c-rt:set var="height" value="330"/>
								<c-rt:set var="size" value="50"/>
							</c-rt:if>
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_rm225.') != -1}">
								<c-rt:set var="imgTypeName" value="长形主档图(170x225<30k)"/>
								<c-rt:set var="width" value="170"/>
								<c-rt:set var="height" value="225"/>
								<c-rt:set var="size" value="30"/>
							</c-rt:if>
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_rm180.') != -1}">
								<c-rt:set var="imgTypeName" value="长形主档图(135x180<20k)"/>
								<c-rt:set var="width" value="135"/>
								<c-rt:set var="height" value="180"/>
								<c-rt:set var="size" value="20"/>
							</c-rt:if>
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_rm130.') != -1}">
								<c-rt:set var="imgTypeName" value="长形主档图(100x130<12k)"/>
								<c-rt:set var="width" value="100"/>
								<c-rt:set var="height" value="130"/>
								<c-rt:set var="size" value="12"/>
							</c-rt:if>
							<c-rt:if test="${fn:indexOf(image.imgFilePath,'_rm93.') != -1}">
								<c-rt:set var="imgTypeName" value="长形主档图(70x93<7k)"/>
								<c-rt:set var="width" value="70"/>
								<c-rt:set var="height" value="93"/>
								<c-rt:set var="size" value="7"/>
							</c-rt:if>
						</c:if>
						<c:if test="${image.type=='DESC'}"><c-rt:set var="imgTypeName" value="描述图"/></c:if>
						<c:if test="${image.type=='IMGB'}"><c-rt:set var="imgTypeName" value="其他图"/></c:if>					 
					<td id="td${rows_index.index}">${imgTypeName}</td>
					<td>
						<c:choose>
						<c:when test="${image.type == 'IMGB'}">
							商品大图：<%=ServerValue.getImgDomain()%>${image.imgFilePath}<br/>
							商品小图：<%=ServerValue.getImgDomain()%>${fn:substring(image.imgFilePath,0,fn:length(image.imgFilePath)-5)}s.jpg
						</c:when>
						<c:otherwise>
							<%=ServerValue.getImgDomain()%>${image.imgFilePath}
						</c:otherwise>
						</c:choose>
						<br/>
						<input id="picImgs_${rows_index.count}" type="file" name="picImgs" maxlength="1" size="25"/>
						<input type="button" name="clearBtn" value="清除图檔" id="picImgsClear_${rows_index.count}"/>
						<span id="picImgNos_${rows_index.count}"></span>
					</td>
					<td><input type="text" maxlength="20" name="picImgDescs" id ="picImgDescs_${rows_index.count}" value="${image.picDesc}"/></td>
					<td><input type="text" maxlength="3" size="3" name="picImgShowSeqs" id ="picImgShowSeqs_${rows_index.count}" value="${image.showSeq}"/></td>
					<td>
						<c:if test="${image.type!='MAIN'}"><input name="deletePic" type="checkbox" value="${image.id}" id="dp_${rows_index.count}"/></c:if>
						<input type="hidden" name="imgIds" id="imgId_${rows_index.count}" value="${image.id}"/>
						<input type="hidden" id="imgCorrect${rows_index.index}" value=""/>
						<input type="hidden" id="width${rows_index.index}" value="${width}"/>
						<input type="hidden" id="height${rows_index.index}" value="${height}"/>
						<input type="hidden" id="size${rows_index.index}" value="${size}"/>
						<input type="hidden" id="imgMsg${rows_index.index}" value=""/>						
					</td>
				</tr>
			</c:forEach>
			<tr>
				<td colspan="6">
					<input type="button" id="batchbtn" value="批次作业"/>
				</td>
			</tr>
		</s:if>
		<s:else>
			<tr>
				<td colspan="6">
						查无资料
				</td>
			</tr>
		</s:else>    
	</table>
</s:form>